<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      v-show="showSearch"
      :inline="true"
    >
      <el-form-item label="回收编码" prop="recycleCode">
        <el-input
          v-model="queryParams.recycleCode"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品类目" prop="category">
        <el-select
          v-model="queryParams.category"
          filterable
          clearable
          multiple
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择商品类目"
          style="width: 180px"
        >
          <el-option
            v-for="item in goods_category"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品品牌" prop="brand">
        <el-select
          v-model="queryParams.brand"
          filterable
          reserve-keyword
          clearable
          style="width: 230px"
          allow-create
          default-first-option
          placeholder="请选择品牌"
        >
          <el-option
            v-for="item in item_brand"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品编码" prop="ref">
        <el-input
          v-model="queryParams.ref"
          placeholder="请输入"
          clearable
          style="width: 230px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品型号" prop="model">
        <el-input
          v-model="queryParams.model"
          placeholder="请输入"
          clearable
          style="width: 230px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品状态" prop="itemStatus">
        <el-select
          v-model="queryParams.itemStatus"
          placeholder="状态"
          style="width: 90px"
          clearable
        >
          <el-option
            v-for="i in item_status"
            :key="i.value"
            :label="i.label"
            :value="i.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="回收价格" prop="recyclePrice">
        <el-input
          v-model="queryParams.recyclePrice"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="回收人" prop="recyclePersonId">
        <el-select
          v-model="queryParams.recyclePersonId"
          filterable
          remote
          reserve-keyword
          placeholder="请选择回收人"
          :remote-method="getUserOption"
          :loading="userLoading"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="打款时间">
        <el-date-picker
          v-model="RecycleTime"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          style="width: 230px"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="销售方" prop="salesPersonId">
        <el-select
          v-model="queryParams.salesPersonId"
          filterable
          remote
          reserve-keyword
          placeholder="请选择销售方"
          :remote-method="getUserOption"
          :loading="userLoading"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="下架时间">
        <el-date-picker
          v-model="salesTime"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 250px"
          :shortcuts="shortcuts"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="维修人" prop="maintenancePersonId">
        <el-select
          v-model="queryParams.maintenancePersonId"
          filterable
          remote
          reserve-keyword
          placeholder="请选择维修人"
          :remote-method="getUserOption"
          :loading="userLoading"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="擦针人" prop="wippePinPersonId">
        <el-select
          v-model="queryParams.wippePinPersonId"
          filterable
          remote
          reserve-keyword
          placeholder="请选择擦针人"
          :remote-method="getUserOption"
          :loading="userLoading"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="handleQuery"
          v-hasPermi="['erp:skesItemFee:query']"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="PieChart"
          @click="handleCount"
          v-hasPermi="['erp:skesItemFee:calculate']"
          >计算利润</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['erp:skesItemFee:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="dataList"
      height="60vh"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="品牌" prop="brand" align="center">
        <template #default="scope">
          <dict-tag
            v-if="scope.row.brand"
            :options="item_brand"
            :value="scope.row.brand"
          />
          <span v-else>{{ scope.row.brandName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品型号" prop="model" align="center" />
      <el-table-column label="商品编码" prop="ref" align="center" />
      <el-table-column
        label="商品正面图"
        prop="watchImageUrl"
        align="center"
        width="110"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center; width: 50px">
            <el-image
              :src="scope.row.watchImageUrl"
              :preview-src-list="[scope.row.watchImageUrl]"
              preview-teleported
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="商品背面图"
        prop="watchImageUrlBack"
        align="center"
        width="110"
      >
        <template #default="scope">
          <div style="display: flex; align-items: center; width: 50px">
            <el-image
              :src="scope.row.watchImageUrlBack"
              :preview-src-list="[scope.row.watchImageUrlBack]"
              preview-teleported
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" prop="itemStatus" align="center">
        <template #default="scope">
          <dict-tag :options="item_status" :value="scope.row.itemStatus" />
        </template>
      </el-table-column>
      <el-table-column label="回收编号" prop="recycleCode" align="center" />
      <el-table-column label="回收人" prop="recyclePerson" align="center" />
      <el-table-column label="回收价格" prop="recyclePrice" align="center" />
      <el-table-column label="成交价" prop="salesPrice" align="center" />
      <el-table-column label="服务费" prop="serviceFee" align="center" />
      <el-table-column
        label="打款时间"
        prop="paymentTime"
        align="center"
        width="100"
      />
      <el-table-column label="抛光费" prop="polishFee" align="center" />
      <el-table-column label="售后费" prop="afterSalesFee" align="center" />
      <el-table-column
        label="下架时间"
        prop="salesTime"
        align="center"
        width="100"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.salesTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="维修人" prop="maintenancePerson" align="center" />
      <el-table-column
        label="维修工费"
        prop="maintenanceCost"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        label="维修提成"
        prop="maintenanceCommissions"
        align="center"
      />
      <el-table-column label="销售方" prop="salesPerson" align="center" />
      <el-table-column
        label="销售提成"
        prop="salesCommissions"
        align="center"
      />
      <el-table-column label="快递费用" prop="expressFee" align="center" />
      <el-table-column label="利润" prop="profit" align="center" />
      <el-table-column label="擦针人员" prop="wippePinPerson" align="center" />
      <el-table-column label="备注" prop="remark" align="center" />
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-tooltip
            content="计算提成"
            placement="top"
          >
            <el-button
              link
              type="primary"
              icon="Money"
              @click="handleSalesCommissions(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            content="修改"
            placement="top"
            v-if="scope.row.roleId !== 1"
          >
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['erp:skesItemFee:edit']"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer-msg">
      <p>
        <i class="el-icon-warning blue-text"></i>
        数量总和:
        <span class="blue-text">{{ summaryInfo.sumCount || "N/A" }}</span>
      </p>
      <p>
        <i class="el-icon-warning blue-text"></i>
        总利润:
        <span class="blue-text">{{ summaryInfo.sumProfit || "N/A" }}</span>
      </p>
      <p>
        服务费:<span class="blue-text">{{
          summaryInfo.sumServiceFee || "N/A"
        }}</span>
      </p>
      <p>
        抛光费:<span class="blue-text">{{
          summaryInfo.sumPolishFee || "N/A"
        }}</span>
      </p>
      <p>
        售后费:<span class="blue-text">{{
          summaryInfo.sumAfterSalesFee || "N/A"
        }}</span>
      </p>
      <p>
        邮费金额总和:<span class="blue-text">{{
          summaryInfo.sumExpressFeeAmount || "N/A"
        }}</span>
      </p>
      <p>
        销售提成总和:<span class="blue-text">{{
          summaryInfo.sumSalesCommissions || "N/A"
        }}</span>
      </p>
      <p>
        销售成交总金额:<span class="blue-text">{{
          summaryInfo.sumSalesAmount || "N/A"
        }}</span>
      </p>
      <p>
        回收成本总金额:<span class="blue-text">{{
          summaryInfo.sumRecycleAmount || "N/A"
        }}</span>
      </p>
      <p>
        维修成本总金额:<span class="blue-text">{{
          summaryInfo.sumMaintenanceCost || "N/A"
        }}</span>
      </p>
      <p>
        维修提成总金额:<span class="blue-text">{{
          summaryInfo.sumMaintenanceComissions || "N/A"
        }}</span>
      </p>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <edit
      v-model:visible="params.visible"
      :params="params"
      @refresh="getList"
    />
  </div>
</template>
<script setup name="Fee_register">
import Edit from "./edit";
import { listTable, calculate, salesCommissions} from "@/api/fee/skesItemFee";
import { optionSelect } from "@/api/system/skesItem";
import { userOptionSelect } from "@/api/system/user";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const selectionData = ref([]);
const total = ref(0);
const loading = ref(true);
const showSearch = ref(true);
const summaryInfo = ref({});
const { goods_category, item_status } = proxy.useDict(
  "goods_category",
  "item_status"
);
const { item_brand } = proxy.useDict("item_brand");
const RecycleTime = ref([]);
const salesTime = ref([]);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    maintenancePerson: undefined,
    recyclePerson: undefined,
    salesPerson: undefined,
    category: undefined,
    ref: undefined,
    model: undefined,
    itemStatus: undefined,
    recycleCode: undefined,
    recyclePrice: undefined,
    brand: undefined,
  },
});
const { queryParams, form, rules } = toRefs(data);

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
const params = ref({
  visible: false,
  obj: JSON.stringify({}),
});
function handleUpdate(row) {
  params.value = {
    visible: true,
    obj: JSON.stringify(row),
  };
}
function handleSalesCommissions(row) {
  salesCommissions({...row}).then(() => {
    ElMessage({ message: '计算销售提成成功', type: "success" });
    getList();
  })
}
/** 用户下拉框 */
const userLoading = ref(false);
const userOptions = ref([]);
async function getUserOption(query) {
  if (query) {
    userLoading.value = true;
    const { data } = await userOptionSelect({ queryKey: query });
    userOptions.value = data.map((i) => {
      const { userId, nickName, userName } = i;
      return {
        value: userId,
        label: `${userId},${nickName},${userName}`,
      };
    });
    userLoading.value = false;
  }
}
getUserOption(" ");
/** 查询列表 */
function getList() {
  loading.value = true;
  const [beginRecycleTime, endRecycleTime] = RecycleTime.value;
  const [beginSalesTime, endSalesTime] = salesTime.value;
  const params = {
    beginRecycleTime,
    endRecycleTime,
    beginSalesTime,
    endSalesTime,
  };
  listTable({ ...queryParams.value, params }).then((response) => {
    dataList.value = response.rows;
    summaryInfo.value = { ...response, rows: undefined };
    total.value = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  salesTime.value = [];
  RecycleTime.value = [];
  handleQuery();
}
/** 导出按钮操作 */
function handleExport() {
  const [beginRecycleTime, endRecycleTime] = RecycleTime.value;
  const [beginSalesTime, endSalesTime] = salesTime.value;
  const params = {
    beginRecycleTime,
    endRecycleTime,
    beginSalesTime,
    endSalesTime,
  };
  proxy.download(
    "fee/skesItemFee/export",
    {
      ...queryParams.value,
      params,
    },
    `skesItemFee_${new Date().getTime()}.xlsx`
  );
}

/** 计算利润 */
async function handleCount() {
  if (selectionData.value.length) {
    await calculate({
      itemIds: selectionData.value,
    });
  } else {
    const [beginRecycleTime, endRecycleTime] = RecycleTime.value;
    const [beginSalesTime, endSalesTime] = salesTime.value;
    const params = {
      beginRecycleTime,
      endRecycleTime,
      beginSalesTime,
      endSalesTime,
    };
    await calculate({
      ...queryParams.value,
      params,
      pageNum: undefined,
      pageSize: undefined,
    });
  }
  proxy.$modal.msgSuccess("利润计算完成");
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  selectionData.value = selection.map((i) => i.itemId);
}
getList();
</script>
